<template>
    <div class="view-detail">

    	<header-bar title="保险明细">
    		<a class="back" @click="onBackClick">back</a>
    		<a class="tools"><i class="help"></i></a>
    	</header-bar>

        <div class="body">

            <panel class="detail-base" v-show="base.insComName">
                <panel-item class="info">
                    <div class="insurance">
                        <i :class="'logo'+base.insComId"></i>
                        <h6>{{base.insComName}}</h6>
                    </div>
                    <div class="car">
                        <span v-show="base.brandTxt">{{base.brandTxt}}</span>
                        <span>{{base.plateNum}}</span>
                    </div>
                </panel-item>
                <panel-item class="expenses">
                    <p>￥{{fmoney(base.currentAmt)}}</p>
                    <i>已为您节省￥{{fmoney(base.totalAmt-base.currentAmt)}}</i>
                </panel-item>
            </panel>

            <panel class="detail-item" v-show="JiaoQiang.name">
                <panel-item>
                    <label>交强险</label>
                    <p v-if="JiaoQiang.isOverDue">{{fmoney(JiaoQiang.premium)}}</p>
                    <p v-else>未过期</p>
                </panel-item>
            </panel>

            <panel class="detail-item" v-show="CheChuan.name">
                <panel-item>
                    <label>车船税</label>
                    <p v-if="CheChuan.isOverDue">￥{{fmoney(CheChuan.premium)}}</p>
                    <p v-else>未过期</p>
                </panel-item>
            </panel>

            <panel class="detail-item more" v-show="ShangYe.length>0">
                <panel-item class="title" :class="{'open-list':toggleSubItem}" :bind="onToggleSubItem">
                    <label>商业险</label>
                    <span class="toggle"></span>
                    <p>￥{{fmoney(totalShangYe)}}</p>
                </panel-item>
                <div class="sub" v-show="toggleSubItem">
                    <panel-item key={i} v-for="i of ShangYe">
                        <label>{{i.name}}<span v-if="i.loseMoney">({{i.loseMoney}})</span><i v-if="i.hasDeductible">不计免赔</i></label>
                        <p>￥{{fmoney(i.premium)}}</p>
                    </panel-item>
                </div>
            </panel>

        </div>

        <button class="payment" @click="onPayment" :class="{paymented:base.status===7}" v-show="base.status===6||base.status===7">
        	<p v-if="base.status!==7">立即支付</p>
            <p v-else>已支付</p>
        	<small v-if="base.status===6">若您支付失败，请致电客服帮您解决</small>
        </button>

    </div>
</template>

<script>
import $http from '@/assets/http'
import headerBar from '@/components/header'
import panel from '@/components/panel'
import panelItem from '@/components/panelItem'
import loading from '@/components/loading'
import {getMobile} from '@/assets/token'
import fmoney from '@/assets/fmoney'

export default {
    data() {
        return {
            toggleSubItem: false,
            JiaoQiang: {},
            CheChuan: {},
            ShangYe: [],
            totalShangYe: 0,
            base: {},
            fmoney
        }
    },
    async created() {
        loading.show()
        try {
            const baseres = await this.fetchBaseData()
            const res = await this.fetchData()
            res.data.forEach(d => {
                if (d.typeId === 1) {
                    this.JiaoQiang = d
                } else if (d.typeId === 2) {
                    this.CheChuan = d
                } else {
                    this.ShangYe.push(d)
                    this.totalShangYe += d.premium
                }
            })
            this.base = baseres.data
        } catch(e) {
            if (e.response.data.errorMsg) {
                toast.show(e.response.data.errorMsg)
            } else {
                alert.show('系统错误，请稍后再试')
            }
        }

        loading.hide()
    },
    methods: {
        fetchBaseData() {
            const {id} = this.$route.params
            const mobile = getMobile()
            return $http.request({
                method: 'get',
                url: `/ins/${mobile}/${id}`,
            })
        },
        fetchData() {
            const {id} = this.$route.params
            const mobile = getMobile()
            return $http.request({
                method: 'get',
                url: `/ins/detail/${mobile}/${id}`,
            })
        },
        onBackClick() {
            this.$router.back()
        },
        onToggleSubItem() {
            this.toggleSubItem = !this.toggleSubItem
        },
        onPayment() {
            const {id} = this.$route.params
            this.$router.push(`/payment/${id}/${this.base.currentAmt}`)
        }
    },
    components: {
    	headerBar,
        panel,
        panelItem
    }
}
</script>

<style scoped lang="scss">
	@import './style'
</style>